<template>
  <div class="main">
    <div class="detail-wrapper">
      <!-- <header-back></header-back> -->
      <div class="toper">
        <div class="backs">
          <img class="cover" :src="commodityData.cover" alt />
          <i class="right" v-show="showBackArrow" @click="$router.back()"></i>
          <img v-show="showShareIcon" @click="openShare" class="share" src="~@/static/images/shareWhite.png" alt />
          <span v-if="courseLength">共{{ courseLength }}个课程</span>
        </div>
      </div>
      <div :class="['tabs fixedTab', showBackArrow ? '' : 'hideHeaderFixedTab']" v-show="showTabs">
        <span :class="tabIndex === 1 ? 'active' : ''" @click="tabIndex = 1">视频课程</span>
        <i></i>
        <span :class="tabIndex === 2 ? 'active' : ''" @click="tabIndex = 2">图文课程</span>
      </div>
      <!-- <scroller ref="scrollerBottom" :on-infinite="handleReachButton" noDataText="没有更多数据"> -->
      <scrollerEdit ref="scrollerBottom" lock-x @on-scroll="onScroll" :bounce="false" @on-scroll-bottom="handleReachButton" :scroll-bottom-offst="150">
        <div class="content">
          <div style="height:3.2rem"></div>
          <div class="content-box">
            <h3>{{ commodityData.topicName }}</h3>
            <div class="desc-box">
              <span class="desc">{{ commodityData.summary }}</span>
            </div>
            <div class="tabs" ref="tabOffestHeight">
              <span :class="tabIndex === 1 ? 'active' : ''" @click="tabIndex = 1">视频课程</span>
              <i></i>
              <span :class="tabIndex === 2 ? 'active' : ''" @click="tabIndex = 2">图文课程</span>
            </div>
            <div class="list" v-show="tabIndex == 1">
              <courseItem @openSharePopup="showShare = true" @openBuyVip="showBuyVipModle = true" :videoLists="videoList"></courseItem>
              <div class="nothing" v-show="showLeftBlank"><img src="~@/static/nothing/empty_meiyoushuju.png" alt="" /><span>抱歉,这个页面暂无数据~</span></div>
            </div>
            <div class="list" v-show="tabIndex == 2">
              <courseItem @openBuyVip="showBuyVipModle = true" @openSharePopup="showShare = true" :videoLists="textList" :whether="false"></courseItem>
              <div class="nothing" v-show="showRightBlank"><img src="~@/static/nothing/empty_meiyoushuju.png" alt="" /><span>抱歉,这个页面暂无数据~</span></div>
            </div>
          </div>
          <load-more v-if="tabIndex == 2 && !showRightBlank" :show-loading="showLoad" :tip="tipmsg"></load-more>
          <load-more v-if="tabIndex == 1 && !showLeftBlank" :show-loading="showVideoLoad" :tip="tipVideomsg"></load-more>
          <div style="height:1rem"></div>
        </div>
        <!--   -->
      </scrollerEdit>
    </div>
    <BuyVip :xBuy="showBuyVipModle" :serverName="serverName" @handleCloseBuyDialog="showBuyVipModle = false"></BuyVip>
    <sharePopup :showSharePopup="showShare" @cancel="showShare = false"></sharePopup>
  </div>
</template>

<script>
import { getCommodityTopicDetail } from '~/api/identity'
import { LoadMore } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import headerBack from '~/components/headerBack'
import courseItem from './components/courseItem'
import BuyVip from '~/components/BuyVip'
import wxapi from '~/plugins/wxapi.js'
import { showShare } from '~/components/share/index'
import sharePopup from './components/sharePopup'
import ls from 'store2'
export default {
  components: {
    headerBack,
    scrollerEdit,
    LoadMore,
    courseItem,
    BuyVip,
    sharePopup,
  },
  data() {
    return {
      showShareIcon: true,
      showLeftBlank: false,
      showRightBlank: false,
      showShare: false,
      showBackArrow: true,
      showBuyVipModle: false,
      serverName: '查看专属升学课程',
      tipmsg: '加载更多',
      showVideoLoad: true,
      tipVideomsg: '加载更多',
      currentVideoPage: 1,
      showLoad: true,
      showTabs: false,
      courseLength: 0,
      tabIndex: null,
      commodityData: {},
      videoList: [],
      textList: [],
      currentPage: 1,
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('share') || this.commonJs.GetUrlParam('mini_token')) {
      this.showBackArrow = false
      this.showShareIcon = false
    }
  },
  mounted: function() {
    this.$visit('Subject/' + this.commonJs.GetUrlParam('id'))
    wxapi.wxRegister()
    this.getCommodityTopicDetail()
    this.getCommodityTopicTextDetail()
    this.courseLength = this.commonJs.GetUrlParam('count')
    this.tabsOffsetTop = this.$refs.tabOffestHeight.offsetTop
  },
  methods: {
    openShare() {
      showShare('open')
    },
    wxShare(pic, titles, descs, id) {
      let uri = window.location.href + '&share=' + true
      let option = {
        title: titles,
        desc: descs,
        link: uri,
        imgUrl: pic,
      }
      wxapi.ShareAppMessage(option)
      wxapi.ShareTimeline(option)
    },
    onScroll(e) {
      if (e.top > this.tabsOffsetTop || e.top == this.tabsOffsetTop) {
        this.showTabs = true
      } else {
        this.showTabs = false
      }
    },
    getCommodityTopicDetail() {
      let obj = {
        commodityType: 1,
        id: this.commonJs.GetUrlParam('id'),
        pageNo: 1,
        pageSize: 10,
        refreshed: 0,
      }
      getCommodityTopicDetail(obj)
        .then((res) => {
          if (res.code == '0') {
            this.commodityData = res.data
            this.videoList = res.data.commoditiesPage.list
            this.totalVideoPages = res.data.commoditiesPage.pages
            if (res.data.commoditiesPage.total === 0) {
              this.tabIndex = 2
            } else {
              this.tabIndex = 1
            }
            if (this.totalVideoPages == 1) {
              this.showVideoLoad = false
              this.tipVideomsg = '没有更多课程'
            } else if (this.totalVideoPages == 0) {
              this.showLeftBlank = true
            }
            this.wxShare(res.data.cover, res.data.topicName, res.data.summary, res.data.id)
          }
        })
        .catch((err) => {})
    },
    getCommodityTopicTextDetail() {
      let obj = {
        commodityType: 2,
        id: this.commonJs.GetUrlParam('id'),
        pageNo: 1,
        pageSize: 10,
        refreshed: 0,
      }
      getCommodityTopicDetail(obj)
        .then((res) => {
          if (res.code == '0') {
            this.commodityData = res.data
            this.textList = res.data.commoditiesPage.list
            this.totalPages = res.data.commoditiesPage.pages
            if (this.totalPages == 1) {
              this.showLoad = false
              this.tipmsg = '没有更多课程'
            } else if (this.totalPages == 0) {
              this.showRightBlank = true
            }
          }
        })
        .catch((err) => {})
    },
    handleReachButton() {
      if (this.tabIndex == 2) {
        if (this.currentPage < this.totalPages) {
          this.currentPage = this.currentPage + 1
          let obj = {
            commodityType: 2,
            id: this.commonJs.GetUrlParam('id'),
            pageNo: this.currentPage,
            pageSize: 10,
            refreshed: 0,
          }
          getCommodityTopicDetail(obj)
            .then((res) => {
              if (res.code == '0') {
                let arr = res.data.commoditiesPage.list
                this.textList = this.textList.concat(arr)
                this.totalPages = res.data.commoditiesPage.pages
              }
            })
            .catch((err) => {})
        } else {
          this.showLoad = false
          this.tipmsg = '没有更多课程'
        }
      } else {
        if (this.currentVideoPage < this.totalVideoPages) {
          this.currentVideoPage = this.currentVideoPage + 1
          let obj = {
            commodityType: 1,
            id: this.commonJs.GetUrlParam('id'),
            pageNo: this.currentVideoPage,
            pageSize: 10,
            refreshed: 0,
          }
          getCommodityTopicDetail(obj)
            .then((res) => {
              if (res.code == '0') {
                let arr = res.data.commoditiesPage.list
                this.videoList = this.videoList.concat(arr)
                this.totalVideoPages = res.data.commoditiesPage.pages
              }
            })
            .catch((err) => {})
        } else {
          this.showVideoLoad = false
          this.tipVideomsg = '没有更多课程'
        }
      }
    },
  },
}
</script>

<style scoped lang="less">
.nothing {
  img {
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    margin: 0.3rem auto;
  }
  span {
    display: block;
    text-align: center;
    font-size: 0.3rem;
    color: #999999;
  }
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.detail-wrapper {
  width: 100%;
  height: 100vh;
  background: #fff;
  padding-top: 1rem;
  .toper {
    width: 100%;
    height: 4.4rem;
    background: url('~@/static/header.png') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: fixed;

    left: 0;
    top: 0;
    .backs {
      .right {
        display: block;
        width: 0.4rem;
        height: 0.4rem;
        margin-left: 0.3rem;
        margin-top: 0.2rem;
        position: absolute;
        top: 0;
        z-index: 100;
        background: url('~@/static/sprite/icon_sprites_40.png') -0.7rem -0.1rem;
        background-size: 3rem 2.4rem;
      }
      .share {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        top: 0.2rem;
        right: 0.3rem;
        z-index: 1000;
      }
      span {
        position: absolute;
        height: 0.64rem;
        padding: 0 0.25rem;
        background: rgba(0, 0, 0, 1);
        border-radius: 0.32rem;
        line-height: 0.64rem;
        font-size: 0.24rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        bottom: 0.4rem;
        left: 0.3rem;
      }
    }
    .cover {
      position: absolute;
      width: 100%;
      height: 4.4rem;
      left: 0;
      top: 0;
    }
  }
}
.content {
  width: 100%;
  // height: 100vh;
  // padding-top: 4.2rem;
  overflow: hidden;

  .content-box {
    // margin-top: 3.2rem;
    width: 100%;
    height: auto;
    background: #fff;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    padding: 0.3rem 0;
    box-sizing: border-box;
    h3 {
      padding: 0 0.3rem;
      box-sizing: border-box;
      font-size: 0.36rem;
      font-family: 'PingFangSC-Semibold', PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.5rem;
    }
    .desc-box {
      padding: 0 0.3rem;
      box-sizing: border-box;
    }
    .desc {
      margin-top: 0.5rem;
      display: block;
      padding: 0.25rem;
      box-sizing: border-box;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.08rem;
      font-size: 0.26rem;
      font-family: 'PingFangSC-Regular', PingFangSC;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 0.4rem;
      margin-bottom: 1rem;
    }

    .list {
      width: 100%;
      height: auto;
      padding: 0 0.3rem;
      box-sizing: border-box;
    }
  }
}
.tabs {
  // padding:  0 0.3rem;
  box-sizing: border-box;
  // margin-top: 1rem;
  margin-bottom: 0.3rem;
  width: 100%;
  height: 1rem;
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 0.3);
  line-height: 1rem;
  padding-left: 0.3rem;
  span {
    font-size: 0.3rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: #999999;
    line-height: 0.4rem;
    vertical-align: middle;
  }
  i {
    display: inline-block;
    width: 0.02rem;
    height: 0.4rem;
    background: rgba(229, 232, 237, 1);
    vertical-align: middle;
  }
  span:nth-of-type(1) {
    margin-right: 0.32rem;
  }
  span:nth-of-type(2) {
    margin-left: 0.32rem;
  }
  .active {
    color: rgba(34, 34, 34, 1);
  }
}
.fixedTab {
  position: fixed;
  left: 0;
  top: 0.98rem;
  z-index: 102;
}
.hideHeaderFixedTab {
  top: 0;
}
</style>
